<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 服务费设置
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="服务费" align="center"></el-table-column>
                <el-table-column label="设置" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="ServiceFee" width="25%">
            <el-form ref="form" :model="form" label-width="70px">
                <el-form-item label="服务费">
                    <el-input type="text" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="ServiceFee = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'ServiceFeeSetting',
  data() {
    return {
      tableData: [{
        date: '50%'
      }],
      ServiceFee: false,
      form: {
        desc: ''
      }
    }
  },
  methods: {
    handleEdit() {
      this.ServiceFee = true
    },
    saveEdit() {


    }
  }

}
</script>

<style  scoped>
</style>